<template>
	<view class="searchList">
		<!-- 搜索 -->
		<view class="to-header">
			<!-- <view class="search-box">
				<view class="search-content">
					<icon type="search" size="18" />
					<input type="text" v-model="keyword" placeholder="请输入你想要的商品" @confirm="search" confirm-type="search" />
				</view>
			</view> -->
			<searchBar :keyword="keyword" @search="searchHandler"></searchBar>
			<!-- 搜索列表 -->
			<view class="list-header">
				<view class="list-header-item active">
					综合
				</view>
				<view class="list-header-item">
					销量
				</view>
				<view class="list-header-item">
					价格
				</view>
			</view>
		</view>
		<view class="list-content">
			<view class="list-content-item" v-for="(item,index) in searchList" :key="index" @click="getDetail(item.goods_id)">
				<image :src="item.goods_small_logo" mode=""></image>
				<view class="details">
					<view class="details-title">
						{{item.goods_name}}
					</view>
					<view class="price">
						<text>￥</text> <text>{{item.goods_price}}</text>
					</view>
				</view>
			</view>
		</view>
		<view style="text-align: center;" v-if="isLastList">
			我也是有底线的哦
		</view>
	</view>
</template>

<script>
	import searchBar from '../../components/searchBar/searchBar.vue'
	export default {
		components:{
			searchBar
		},
		data() {
			return {
				keyword: '',
				searchList: [],
				// 每页条数
				pagesize: 6,
				pagenum: 1,
				isLastList: false,
				// 是否请求
				isRequest: false,
				// 是否Fixed定位
				isFixed:true

			}
		},
		onLoad(options) {
			this.keyword = options.keyword
			this.getSearchList()
		},
		// 检测用户下拉
		onPullDownRefresh() {
			this.isFixed=true
			this.search()

		},
		// 上拉
		onReachBottom() {
			if (!this.isLastList) {
				this.pagenum++
				this.getSearchList()
			}
		},
		// 监听页面是否滚动
		onPageScroll(){
			this.isFixed=false
		},
		methods: {
			searchHandler(val){
				console.log(val)
				this.keyword=val
				this.search()
			},
			getDetail(goods_id) {
				uni.navigateTo({
					url: '/pages/item/item?goods_id=' + goods_id
				})
			},
			async getSearchList() {
				if (this.isRequest) {
					return
				}
				this.isRequest = true
				const res = await this.$request({
					url: '/api/public/v1/goods/search',
					data: {
						query: this.keyword,
						pagenum: this.pagenum,
						pagesize: this.pagesize
					},
					isLoading: false
				})
				this.isRequest = false
				this.searchList.push(...res.goods)
				uni.stopPullDownRefresh()

				if (this.searchList.length === res.total) {
					this.isLastList = true
				}
			},
			// 搜索
			search() {
			// 重置是否最后一页
				this.isLastList=false
				this.searchList = []
				this.pagenum = 1
				this.getSearchList()
			}
		}
	}
</script>

<style lang="less">
	.searchList {
		.to-header{
			position: sticky;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			width: 100%;
			background-color: #fff;
		}
		

		.list-header {
			display: flex;
			height: 100rpx;
			align-items: center;
			border-bottom: 1rpx solid #ddd;

			.list-header-item {
				text-align: center;
				width: 33.33%;

				&.active {
					color: #eb4450;
				}
			}
		}

		.list-content {
			padding: 0 20rpx;
			.list-content-item {
				display: flex;
				box-sizing: border-box;
				padding: 30rpx 0;
				height: 260rpx;
				border-bottom: 1rpx solid #ddd;

				image {
					width: 200rpx;
					height: 200rpx;
				}

				.details {
					flex: 1;
					font-size: 14px;
					margin-left: 25rpx;
					display: flex;
					align-content: space-between;
					flex-wrap: wrap;

					.details-title {
						text-overflow: -o-ellipsis-lastline;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						line-clamp: 2;
						-webkit-box-orient: vertical;
					}

					.price {
						color: #eb4450;
					}
				}
			}
		}
	}
</style>
